h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
div {
    margin: 0;
    padding: 0;

}

// *{
//     margin: 0;
//     padding: 0;
// }

.swiper {
    width: 520px;
    height: 280px;

    img{
        width: 520px;
        height: 280px;
    }
    
    .swiper-button-next,.swiper-button-prev{
        display: none;
        color: #ccc;
        background-color: #514e4e;
        opacity: .7;
    }
}
.swiper:hover .swiper-button-next{
    display: block;
}
.swiper:hover .swiper-button-prev{
    display: block;
}


ul,
li {
    list-style: none;
}

body,
html {
    height: 100%;
}

.w {
    width: 1190px;
    margin: 0 auto;
}

.head {
    height: 36px;
    width: 100%;
    background-color: #f5f5f5;
    border-bottom: 1px solid #eee;

    .w {
        height: 36px;
        display: flex;
        justify-content: space-between;

        .list1 {
            width: 370px;
            height: 36px;
            display: flex;
            justify-content: space-between;


            li a {
                font-size: 12px;
                line-height: 36px;
                font-weight: 400;
                text-decoration: none;
                color: #6c6c6c;

            }

            li:first-child>span {
                margin-left: 15px;
                color: #6c6c6c;
            }

            li:nth-child(2) a {
                color: #f22e00;
            }

            li:hover a {
                color: #f22e00;
            }
        }

        .list2 {
            width: 560px;
            display: flex;
            justify-content: space-between;

            li>a {
                font-size: 12px;
                line-height: 36px;
                font-weight: 400;
                text-decoration: none;
                color: #6c6c6c;
            }

            i {
                color: #6c6c6c;
                font-size: 12px;
                cursor: pointer;
            }

            li:nth-child(2) i {
                color: #f22e00;
            }

            li:nth-child(1) span,
            li:nth-child(6) span,
            li:nth-child(7) span {
                margin-left: 10px;
                color: #6c6c6c;
            }

            li:hover a {
                color: #f22e00;
            }

            li:hover i {
                color: #f22e00;
            }
        }
    }
}

.select {
    width: 100%;
    height: 121px;
    padding-top: 24px;
    box-sizing: border-box;
    background-color: #eae8eb;


    .w {
        height: 97px;
        display: flex;


        .logo {
            width: 190px;
            height: 88px;
            margin-left: 32px;

            a {
                display: block;
                width: 142px;
                height: 59px;
                margin-left: 14px;
                margin-top: 8px;
                background: url(./images/logo.png) no-repeat;
                background-size: contain;

            }
        }

        .search {
            width: 744px;
            height: 42px;
            margin-top: 12px;

            border-radius: 20px;
            border: 2px solid #FF5000;
            margin-left: 25px;
            background-color: #fff;

            .search-input {

                >i {
                    display: inline-block;
                    width: 65px;
                    height: 38px;
                    text-align: center;
                    line-height: 38px;
                    font-size: 14px;
                    font-style: normal;
                    color: rgb(110, 105, 105);
                    font-weight: 400;
                    margin-left: 5px;

                }

                >input {
                    width: 590px;
                    height: 20px;
                    margin: 9px 0;
                    border: none;
                    border-left: 1px solid #ccc;
                    outline: none;
                    padding-left: 8px;
                    box-sizing: border-box;
                }

                >button {
                    width: 72px;
                    height: 34px;
                    background: #FF5000;
                    border: none;
                    color: #fff;
                    font-size: 18px;
                    font-weight: 500;
                    background-image: linear-gradient(to right, #ff9000 0, #ff5000 100%);
                    background-repeat: repeat-x;
                    cursor: pointer;
                    border-radius: 22px;
                    margin-top: 2px;
                }

            }

            .search-ul {
                width: 573px;
                height: 18px;
                display: flex;
                margin-left: 10px;
                margin-top: 10px;

                li a {
                    color: #666;
                    font-size: 12px;
                    margin-right: 10px;
                    font-weight: 300;
                    text-decoration: none;

                }

                li:hover a {
                    color: #FF5000;

                }
            }



        }

        .ma {
            width: 76px;
            height: 90px;
            background-color: #fff;
            margin-left: 120px;
            position: relative;
            top: -10px;
            z-index: 2;


            span {
                width: 48px;
                font-size: 14px;
                line-height: 20px;
                margin: 4px 10px 0;
                cursor: pointer;
                text-align: center;
                color: #ff5000;
            }

            img {
                width: 62px;
                height: 62px;
                margin-left: 7px;
                display: block;
            }
        }
    }
}

.main {
    width: 100%;
    height: 562px;
    background-color: #eae8eb;
    padding-top: 5px;

    .w {
        height: 562px;
        background-color: #fff;
        border-radius: 18px 18px 0 0;
        display: flex;
        justify-content: space-between;

        .main-left {
            width: 212px;
            height: 562px;


            h2 {
                padding-top: 14px;
                width: 190px;
                text-align: center;
                font-size: 16px;
                color: #FF6200;
            }

            ul {
                width: 212px;
                height: 519px;
                padding: 6px 0 3px 18px;

                li {
                    width: 212px;
                    height: 20px;
                    line-height: 20px;
                    margin-bottom: 14px;
                    color: #666;

                    i {
                        width: 16px;
                        height: 16px;
                        font-size: 16px;
                        margin-right: 12px;
                    }

                    >a {
                        color: #666;
                        font-size: 14px;
                        font-weight: 300;
                        text-decoration: none;
                    }

                    span {
                        width: 7px;
                        height: 20px;
                        padding: 0 8px;

                    }
                }

                li:hover {
                    color: #FF6200;
                }

                li:hover>a {
                    color: #FF6200;
                    text-decoration: underline;
                }

            }
        }

        .main-right {
            width: 950px;
            height: 562px;


            .right-title {
                width: 950px;
                height: 36px;
                display: flex;
                padding-top: 6px;

                .nav1 {
                    width: 219px;
                    height: 30px;
                    display: flex;

                    li a {
                        font-size: 16px;
                        font-weight: 400;
                        text-align: center;
                        line-height: 30px;
                        margin-right: 20px;
                        letter-spacing: 1px;
                        text-decoration: none;

                    }
                }

                .nav2 {
                    width: 235px;
                    height: 15px;
                    margin-top: 8px;
                    border-left: 1px solid #333;
                    border-right: 1px solid #333;
                    display: flex;
                    justify-content: space-between;
                    padding: 0 15px;


                    li>a {
                        text-decoration: none;
                        font-size: 13px;
                        line-height: 15px;
                        color: #3c3c3c;
                        vertical-align: top;
                        text-align: center;
                        font-weight: 300;
                    }

                    li:hover a {
                        color: #f22e00;
                    }
                }

                .nav3 {
                    display: flex;
                    justify-content: space-between;
                    width: 370px;
                    height: 30px;
                    margin-left: 12px;

                    li>a {
                        font-size: 13px;
                        line-height: 30px;
                        color: #3c3c3c;
                        font-weight: 300;
                        text-decoration: none;
                    }

                    li:hover>a {
                        color: #f22e00;
                    }
                }
            }

            .main-box {
                width: 950px;
                height: 525px;
                display: flex;
                justify-content: space-between;

                .main-boxleft {
                    width: 520px;
                    height: 511px;
                    margin-top: 10px;

                    .main-banner {
                        width: 520px;
                        height: 280px;
                        overflow: hidden;
                        border-radius: 12px;
                        position: relative;

                        .imgs-nav {
                            width: 70px;
                            height: 13px;
                            display: flex;
                            justify-content: space-between;
                            border-radius: 10px;
                            position: absolute;
                            bottom: 15px;
                            left: 50%;
                            text-align: center;
                            background-color: rgba(255, 255, 255, .6);

                            li>a {
                                display: block;
                                padding-top: 8px;
                                width: 8px;
                                height: 0;
                                margin-top: 3px;
                                border-radius: 50%;
                                background-color: #fff;
                            }
                        }

                        .btn-left {
                            font-size: 30px;
                            position: absolute;
                            left: 8px;
                            top: 50%;
                            color: #fff;
                            text-decoration: none;
                            display: none;
                        }

                        .btn-right {
                            font-size: 30px;
                            position: absolute;
                            right: 8px;
                            top: 50%;
                            color: #fff;
                            text-decoration: none;
                            display: none;
                        }

                        .imgs-box {
                            width: 3120px;
                            height: 280px;
                            display: flex;
                            overflow: hidden;

                            >img {
                                width: 520px;
                                height: 280px;
                            }
                        }
                    }

                    .main-banner:hover>a {
                        display: inline-block;
                    }

                    .main-tip {
                        height: 24px;
                        line-height: 24px;
                        position: relative;

                        >img {
                            width: 74px;
                            height: 22px;
                        }

                        >span {
                            font-size: 12px;
                            color: #999;

                        }

                        >strong {
                            position: absolute;
                            top: 1px;
                            right: 0;
                            font-family: sans-serif;
                            font-size: 12px;
                            font-weight: 400;

                            >i {
                                font-style: normal;
                                color: #ff1648;
                            }
                        }
                    }

                    .main-banner2 {
                        width: 520px;
                        height: 201px;
                        background-color: #F6F6F6;
                        border-radius: 12px;
                        overflow: hidden;

                        .bigbox {
                            width: 3120px;
                            height: 201px;
                            display: flex;
                            overflow: hidden;

                            >div {
                                width: 506px;
                                height: 195px;
                                display: flex;
                                justify-content: space-between;
                                margin-top: 6px;
                                margin-left: 7px;


                                >img {
                                    width: 246px;
                                    height: 185px;
                                    border-radius: 12px;
                                }
                            }
                        }


                    }


                }

                .main-boxright {
                    width: 394px;
                    height: 526px;

                    .box-login {
                        width: 376px;
                        height: 145px;
                        border-radius: 12px 12px 0 0;
                        background-color: #F3F3F3;
                        margin-top: 10px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        padding-top: 10px;

                        >img {
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                        }

                        >span {
                            font-size: 12px;
                            margin-top: 4px;
                            display: block;
                            line-height: 17px;
                            height: 17px;
                            text-align: center;
                        }

                        .login-btn {
                            width: 356px;
                            height: 32px;
                            margin-top: 30px;
                            display: flex;
                            justify-content: space-between;

                            >a {
                                display: block;
                                width: 108px;
                                height: 32px;
                                font-size: 16px;
                                line-height: 32px;
                                border-radius: 4px;
                                text-align: center;
                                color: #fff;
                                background-color: #ff6f06;
                                text-decoration: none;
                            }
                        }
                    }

                    .new-img {
                        width: 376px;
                        height: 157px;
                        padding-top: 16px;
                        background-color: #F3F3F3;

                        >img {
                            width: 356px;
                            height: 141px;
                            border-radius: 6px;
                            margin-left: 12px;
                        }
                    }

                    .new-text {
                        width: 361px;
                        height: 125px;
                        padding-left: 15px;
                        padding-top: 17px;
                        background-color: #F3F3F3;
                        box-sizing: content-box;

                        .new-tip {
                            span:first-child {
                                height: 16px;
                                font-size: 12px;
                                line-height: 16px;
                                font-weight: 700;
                            }

                            span:last-child {
                                margin-left: 6px;
                                height: 16px;
                                font-size: 12px;
                                line-height: 16px;
                            }
                        }

                        >ul {

                            width: 300px;
                            margin-top: 14px;

                            >li {
                                display: flex;
                                margin-bottom: 8px;

                                >span {
                                    height: 18px;
                                    width: 32px;
                                    line-height: 18px;
                                    border-radius: 2px;
                                    background-color: #ffefef;
                                    opacity: .8;
                                    text-align: center;
                                    font-size: 12px;
                                    color: #FF5000;
                                    font-weight: 700;
                                }

                                >p {
                                    font-size: 12px;
                                    font-weight: 200;
                                    color: #666;
                                    margin-left: 8px;
                                }
                            }
                            li:hover p{
                                color: #F40;
                                text-decoration: underline;
                            }

                        }
                    }

                    .login-icon {
                        width: 364px;
                        height: 52px;
                        padding: 0 0 17px 12px;
                        background-color: #F3F3F3;
                        border-radius: 0 0 12px 12px;
                        box-sizing: content-box;

                        ul {
                            width: 345px;
                            height: 52px;
                            display: flex;
                            justify-content: space-between;

                            >li {
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;

                                >span {
                                    display: block;
                                    width: 60px;
                                    height: 36px;
                                    font-size: 24px;
                                    text-align: center;
                                    line-height: 36px;
                                    color: #3c3c3c;
                                }

                                >h4 {
                                    font-size: 12px;
                                    color: #333;
                                    width: 60px;
                                    line-height: 17px;
                                    text-align: center;
                                }
                            }

                            li:hover span {
                                color: #FF6200;
                            }
                        }
                    }
                }
            }

            .selected {
                background-color: #f22e00 !important;
            }
        }
    }
}

.shop {
    width: 100%;
    height: 330px;
    background-color: #eae8eb;

    .w {
        height: 330px;
        background-color: #fff;
        padding-top: 20px;
        box-sizing: content-box;

        >h3 {
            margin-bottom: 20px;
            margin-left: 20px;
            font-size: 24px;
            color: #3c3c3c;

            >img {
                width: 65px;
                height: 20px;
                margin-left: 6px;
            }
        }

        .huo-list {
            width: 100%;
            height: 309px;
            display: flex;
            box-sizing: content-box;

            >li {
                width: 215px;
                height: 264px;
                margin-left: 20px;

                >img {
                    width: 215px;
                    height: 215px;
                    border-radius: 12px;
                    display: block;
                }

                >h4 {
                    line-height: 16px;
                    margin-top: 10px;
                    font-weight: normal;
                    width: 198px;
                    height: 16px;
                    font-size: 16px;
                    color: #333333;

                }

                >h4:hover {
                    color: #FF5000;
                }

                >h5 {
                    width: 182px;
                    height: 15px;
                    line-height: 15px;
                    margin-top: 8px;
                    font-size: 14px;
                    color: #999999;
                }

            }

        }
    }
}

.like {
    width: 100%;
    background-color: #eae8eb;
    min-height: 330px;
    padding-bottom: 20px;
    box-sizing: content-box;

    .w {
        height: 100%;
        background-color: #fff;
        padding-top: 20px;
        padding-bottom: 30px;
        box-sizing: content-box;

        >h3 {
            margin-bottom: 20px;
            margin-left: 20px;
            font-size: 24px;
            color: #3c3c3c;

            >img {
                width: 65px;
                height: 20px;
                margin-left: 6px;
            }
        }

        .like-box{

            .like-list {
                width: 100%;
                // height: 319px;
                margin-bottom: 8px;
                display: flex;
                flex-wrap: wrap;
                box-sizing: content-box;
    
                >li {

                    width: 215px;
                    height: 319px;
                    margin-left: 7px;
                    margin-bottom: 2px;
                    padding: 7px 7px 0 7px;
                    box-sizing: content-box;

                    a{
                        display: block;
                        width: 215px;
                        height: 319px;
                        text-decoration: none;

                        >img {
                            width: 215px;
                            height: 215px;
                            border-radius: 12px;
                            display: block;
                        }
        
                        >h4 {
                            margin-top: 9px;
                            line-height: 22px;
                            height: 44px;
                            font-size: 16px;
                            color: #111111;
                            font-weight: lighter;
                            letter-spacing: 1px;
                            transition: color 0.3s;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
        
                        }
        
        
                        span {
                            display: block;
                            color: #F40;
                            font-size: 20px;
                            height: 22px;
                            line-height: 22px;
                            margin-top: 10px;
        
                            em {
                                font-size: 12px;
                            }
                        }
        
                    }
    
                   
                }
    
                li:hover {
    
                    box-shadow: 0 19px 39px 0 rgb(0 0 0 / 12%);
                    background-color: #fff;
                    border-radius: 12px;
                }
    
                li:hover h4 {
                    color: #ff6f06;
                }
    
            }
        }


        .bottom {
            width: 100%;
            height: 180px;
            padding-top: 40px;
            display: flex;
            margin: 0 60px;

            >div {

                p {
                    width: 248px;
                    height: 48px;
                    margin-bottom: 5px;

                    i {
                        width: 32px;
                        height: 32px;
                        font-size: 32px;
                        color: #999;
                        vertical-align: middle;
                    }

                    span {
                        font-size: 16px;
                        margin-left: 5px;
                        padding-top: 12px;
                        vertical-align: middle;
                    }
                }

                >ul {
                    width: 248px;
                    height: 85px;
                    display: flex;
                    flex-wrap: wrap;


                    li {
                        height: 21px;
                        margin-right: 10px;
                        color: #999;
                        line-height: 21px;
                        font-size: 12px;
                        text-decoration: none;
                        cursor: pointer;


                    }
                }
            }


        }
    }
}


.footer {
    height: 320px;
    width: 100%;
    background-color: #fff;

    .w {
        height: 320px;

        >img {
            width: 1190px;
            height: 320px;
            margin-top: 30px;
        }
    }
}